<template>
	<view class="outer3 flex-col">
		<view class="layer3 flex-col">
			<view class="phone">
				<text class="phone_name">手机号</text>
				<text class="phone_old">{{data.old_p}}</text>
				<!-- <input type="text" placeholder="请输入手机号"> -->
			</view>
			<view class="phone1">
				<view class="qing">
					<text class="phone_name">验证码</text>
					<input type="text" placeholder="请输入验证码" v-model="data.old_verify">
				</view>
				<view v-if="data.showText==true" class="send word5" @click="getCode">发送验证码</view>
				<view v-else class="send wordA">重新发送{{data.second}}s</view>
			</view>
			<view class="phone">
				<text class="phone_name">新手机号</text>
				<input type="text" placeholder="请输入手机号" v-model="data.new_phone">
			</view>
			<view class="phone1">
				<view class="qing">
					<text class="phone_name">验证码</text>
					<input type="text" placeholder="请输入验证码" v-model="data.new_verify">
				</view>
				<view v-if="data.showText1==true" class="send word5" @click="getCode1">发送验证码</view>
				<view v-else class="send wordA">重新发送{{data.second1}}s</view>
			</view>
			<button class="Button2 flex-col" @click="modify">
				<text class="word9">确定修改</text>
			</button>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	let data = ref({
		second: 60,
		showText: true,
		second1: 60,
		showText1: true,
		constants: {},
		old_phone: '', //旧手机号
		old_p: '',
		new_phone: '', //新手机号
		old_verify: '', //旧手机验证码
		new_verify: '', //新手机验证码
	})

	onShow(() => {
		getDate()
	})
	const getDate = () => {
		proxy.$req.requestPOST(proxy.$api.CenterInfo.getInfo, {
			shop_id: uni.getStorageSync('shop_id')
		}).then(res => {
			if (res.flag == "success") {
				data.value.old_phone = res.data.phone
				data.value.old_p = data.value.old_phone.replace(data.value.old_phone.substring(3, 7), "****")
			}
		})
	}
	const getCode = () => { //旧手机验证码
		proxy.$req.requestPOST(proxy.$api.VerifyInfo.sendCode, {
			phone: data.value.old_phone,
			unique_code: 'retrieve',
			type: 2
		}).then(res => {
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			if (res.flag == "success") {
				data.value.showText = false
				var interval = setInterval(() => {
					let times = --data.value.second
					data.value.second = times < 10 ? '0' + times : times //小于10秒补 0
				}, 1000)
				setTimeout(() => {
					clearInterval(interval)
					data.value.second = 60
					data.value.showText = true
				}, 60000)
			}
		})
	}
	const getCode1 = () => { //新手机验证码
		proxy.$req.requestPOST(proxy.$api.VerifyInfo.sendCode, {
			phone: data.value.new_phone,
			unique_code: 'bindNewAccount',
			type: 2
		}).then(res => {
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
			if (res.flag == "success") {
				data.value.showText1 = false
				var interval = setInterval(() => {
					let times = --data.value.second1
					data.value.second1 = times < 10 ? '0' + times : times //小于10秒补 0
				}, 1000)
				setTimeout(() => {
					clearInterval(interval)
					data.value.second1 = 60
					data.value.showText1 = true
				}, 60000)
			}
		})
	}
	const modify = () => { //确认修改
		proxy.$req.requestPOST(proxy.$api.VerifyInfo.checkCode, {
			phone: data.value.old_phone,
			unique_code: 'modify_account',
			type: 2
		}).then(res => {
			if (res.flag == "success") {
				proxy.$req.requestPOST(proxy.$api.VerifyInfo.checkCode, {
					phone: data.value.new_phone,
					unique_code: 'bindNewAccount',
					type: 2
				}).then(res => {
					if (res.flag == "success") {
						proxy.$req.requestPOST(proxy.$api.VerifyInfo.getVerify, {
							shop_id: uni.getStorageSync('shop_id'),
							account: data.value.old_phone,
							verify: data.value.old_verify,
							new_account: data.value.new_phone,
							new_verify: data.value.new_verify,
						}).then(res => {
							uni.showToast({
								title: res.message,
								icon: "icon",
							})
							if (res.flag == "success") {
								setTimeout(() => {
									uni.navigateBack()
								}, 1000)
							}
						}).catch(err => {
							uni.showToast({
								title: res.message,
								icon: "error",
							})
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			} else {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			}
		})

	}
	const toLogin = () => {
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}
</script>

<style scoped lang="scss">
	.outer3 {
		background-color: rgba(248, 248, 248, 1);
		height: 100vh;
		width: 750rpx;
	}

	.layer3 {
		width: 690rpx;
		// height: 1400rpx;
		margin: 30rpx 0 0 30rpx;
	}

	.phone {
		width: 97%;
		height: 90rpx;
		padding: 0 5%;
		display: flex;
		align-items: center;
		/* padding-bottom: 10rpx; */
		border-bottom: 2rpx solid #F2F2F2;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 10rpx;
	}

	.phone>image {
		width: 42rpx;
		height: 42rpx;
		margin-right: 50rpx;
	}

	.phone_name {
		width: 112rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-right: 50rpx;
	}

	.phone_old {}

	.phone1 {
		width: 100%;
		height: 90rpx;
		display: flex;
		align-items: flex-end;
		border-bottom: 2rpx solid #F2F2F2;
		margin-bottom: 10rpx;
	}

	.qing {
		width: 67%;
		padding-left: 5%;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
	}

	.qing>image {
		width: 42rpx;
		height: 42rpx;
		margin-right: 10rpx;
		margin-right: 50rpx;
	}

	.qing>input {
		width: 65%;
	}

	.word5 {
		width: 27%;
		height: 90rpx;
		// padding-left: 20rpx;
		overflow-wrap: break-word;
		color: rgba(255, 55, 51, 1);
		font-size: 28rpx;
		/*  border-left: 2rpx solid #E1E1E1; */
		text-align: center;
		white-space: nowrap;
		line-height: 90rpx;
		display: block;
		/* margin: 8rpx 0 0 24rpx; */
		margin-left: 3%;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.wordA {
		width: 27%;
		height: 90rpx;
		font-size: 26rpx;
		padding-left: 20rpx;
		/* border-left: 2rpx solid #E1E1E1; */
		text-align: center;
		line-height: 90rpx;
		margin-left: 3%;
		white-space: nowrap;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.Button2 {
		height: 98rpx;
		background-color: #54BC6E;
		border: 0;
		border-radius: 20rpx;
		width: 670rpx;
		position: fixed;
		bottom: 40rpx;
		left: 40rpx;
	}

	.word9 {
		width: 127rpx;
		height: 31rpx;
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		font-family: PingFangSC-;
		text-align: center;
		white-space: nowrap;
		line-height: 32rpx;
		margin: 34rpx 0 0 272rpx;
	}
</style>